<template>
  <el-form v-loading="formLoading" label-width="120px">

    <el-form-item label="目录 名称">
      <el-input :disabled="readOnly" v-model="courseCatalog.courseCatalogName"/>
    </el-form-item>
    <el-form-item v-if="!createCatalog" label="创建 时间">
      <span>{{courseCatalog.courseCatalogCreateDate}}</span>
    </el-form-item>
    <el-form-item v-if="!createCatalog" label="目录 状态">
      <el-switch :disabled="readOnly" v-model="courseCatalog.courseCatalogStatus"
                 style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value=1
                 :inactive-value=0 />
    </el-form-item>

    <el-form-item v-if="controller">
      <el-button type="primary" @click="onSubmit" v-if="createCatalog">创 建</el-button>
      <el-button @click="clear" v-if="createCatalog">清 空</el-button>
      <el-button type="primary" @click="readOnly = false;" v-if="!createCatalog&readOnly">修 改</el-button>
      <el-button type="primary" @click="onSave" v-if="!createCatalog&!readOnly">保 存</el-button>
      <el-button @click="back" v-if="!createCatalog&!readOnly">返 回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import {reactive, ref} from "vue";

export default {
  name: "courseCatalogDetail",
  props: ['courseId','catalogId', 'readOnly', 'createCatalog'],
  setup(props) {
    const formLoading = ref(false);
    const readOnly = ref(props.readOnly);
    const createCatalog = ref(props.createCatalog);

    const courseCatalog = reactive({
      catalogId:ref(props.catalogId),
      courseId: ref(props.courseId),
      "courseCatalogName": "",
      "courseCatalogCreateDate": "",
      "courseCatalogStatus": 1
    })
    //记录默认数据
    const oldCourseCatalog = {};

    //是否显示控制栏
    const controller = ref(true);

    return {courseCatalog,oldCourseCatalog, formLoading,readOnly, createCatalog,controller};
  },
  methods: {
    onSubmit(){
      //检查课程id是否为空
      if (null == this.courseCatalog.courseId) {
        ElMessage.warning('课程id不能为空');
        return;
      }else if(null == this.courseCatalog.courseCatalogName || this.courseCatalog.courseCatalogName == ''){
          //检查目录名称是否为空
          ElMessage.warning('目录名不能为空');
          return;
      }
      //开启表单加载
      this.formLoading = true;
      axios.post('/api/insertCourseCatalog',{
        courseCatalogName:this.courseCatalog.courseCatalogName,
        courseId:this.courseCatalog.courseId
      },{
        headers:{
          'Content-Type':'application/json;charset=UTF-8'
        }
      }).then((response)=>{
        if (response.data.code == 200) {
          ElMessage.success(response.data.msg);
          this.readOnly = true;
          this.controller = false;
        }else {
          ElMessage.warning(response.data.msg);
        }
      }).catch(function (error){
        console.log(error);
      }).finally(()=>{
        this.formLoading = false;
      })
    },
    onSave(){
        //检查课程目录id是否为空
      if (null == this.courseCatalog.catalogId) {
        ElMessage.warning('目录id不能为空');
        return;
      }

      //检查目录名称是否为空
      if (null == this.courseCatalog.courseCatalogName || this.courseCatalog.courseCatalogName == '') {
        ElMessage.warning('目录名称不能为空');
        return;
      }

      //检查目录状态是否异常
      if (null == this.courseCatalog.courseCatalogStatus || this.courseCatalog.courseCatalogStatus < 0 || this.courseCatalog.courseCatalogStatus > 1) {
        ElMessage.warning('目录状态异常');
        return;
      }
      //开启表单加载
      this.formLoading = true;

      axios.put('/api/updateCourseCatalogById',{
        courseCatalogId:this.courseCatalog.catalogId,
        courseCatalogName:this.courseCatalog.courseCatalogName,
        courseCatalogStatus:this.courseCatalog.courseCatalogStatus
      },{
        headers:{
          'Content-Type':'application/json;charset=UTF-8'
        }

      }).then((response)=>{
        if (response.data.code == 200) {
            ElMessage.success(response.data.msg);
            this.readOnly  =true;
        }else{
            ElMessage.warning(response.data.msg);
        }
      }).catch(function (error){
        console.log(error)
      }).finally(()=>{

        this.formLoading = false;
      })
    },
    clear(){
        this.courseCatalog.courseCatalogName = '';
    },
    back(){
        this.readOnly = true;
        this.setCatalog(this.oldCourseCatalog)
    },
    //根据目录id获取目录信息
    getCourseCatalog() {
      //检查目录id是否为空
      if (null == this.courseCatalog.catalogId) {
        ElMessage.warning('目录id不能为空');
        return;
      } else {
        //开启表单加载
        this.formLoading = true;
        axios.get(`/api/selectCourseCatalogById?id=${this.courseCatalog.catalogId}`).then((response) => {
          this.oldCourseCatalog = response.data.data;
          if (response.data.code == 200) {
            this.setCatalog(response.data.data);
          } else {
            ElMessage.warning(response.data.msg);
          }
        }).catch(function (error) {
          console.log(error);
        }).finally(()=>{
          this.formLoading = false;
        })
      }
    },
    setCatalog(data){
      this.courseCatalog.courseCatalogName = data.courseCatalogName;
      this.courseCatalog.courseCatalogCreateDate = data.courseCatalogCreateDate;
      this.courseCatalog.courseCatalogStatus = data.courseCatalogStatus;
    }

  },
  watch: {
    catalogId(newId, oldId) {
      this.courseCatalog.catalogId = newId;
      if (null == newId) {
        this.readOnlys = false;
      } else {
        if (this.readOnly == true || !this.createCatalog)
          this.getCourseCatalog();
      }
    },
    courseId(newId,oldId){
      this.courseCatalog.courseId = newId;
      if (null == this.courseCatalog.courseId) {
        ElMessage.warning('课程id不能为空');
      }
    },

  },
  created() {
    if(!this.createCatalog){
      this.getCourseCatalog();
    }
  }
}
</script>

<style scoped>

</style>